import Link from 'next/link'
import Image from 'next/image'
import UserMenu from "@/components/Menu/UserMenu"
import styles from '@/styles/TopArea.module.css'
import Icon from '@/components/icon/Icon'
export default function TopArea () {
    return (
        <div className={styles['App-top']}>
            <nav>
                <Link href="/" className={styles['App-top-link']}>
                    <div className={styles['App-top-title']}>
                        <Image
                            src='/images/icon.png'
                            alt='稳网互联知识图谱探索平台官方'
                            width={45}
                            height={45}
                            className={styles['App-top-title-img']}
                            priority // 优先加载关键资源
                        />
                        <div className={styles['App-top-title-text']}>
                            <h1 className={styles["App-top-title-subtitle"]}>
                                <span className={styles['App-top-title-subtitle1']}>知识图谱 </span>
                                <span className={styles['App-top-title-subtitle2']}>探索平台</span>
                            </h1>
                            <p className={styles['App-top-title-subtitle-tip']}>📚 连接知识，洞察未来</p>
                        </div>

                    </div>
                </Link>
            </nav>
            <div className={styles['App-top-group']}>
                <Link href={'/'} type={'button'} className={styles['App-top-group-button']}>
                    <Icon icon={['fas','home']} className={styles['App-top-group-button-icon']} />
                    首页
                </Link>
                <button type={'button'} className={styles['App-top-group-button']}>
                    <Icon icon={['fas','book']} className={styles['App-top-group-button-icon']} />
                    知识库
                </button>
                <Icon icon={['fas','bell']} className={styles['App-top-group-button-icon']} />
            </div>
            <div className={styles['App-top-user']}>
                <UserMenu onLogout={function(): void {
                    throw new Error('Function not implemented.')
                } } />
            </div>
        </div>
    )
}